/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: soubao-java 2020-07-22 $
 */<template>
  <div>
    <div class="item-title">
      <div class="subject">
        <h3>地区设置</h3>
        <h5>可对系统内置的地区进行编辑</h5>
      </div>
    </div>
    <div
      id="explanation"
      class="explanation"
      style="color: rgb(85, 85, 85); background-color: rgb(243, 244, 244); width: 98%; height: 100%;"
    >
      <div class="bckopa-tips">
        <div class="title">
          <img src="@/static/images/handd.png" alt />
          <h4 title="提示相关设置操作时应注意的要点">操作提示</h4>
        </div>
        <ul>
          <li>全站所有涉及的地区均来源于此处，强烈建议对此处谨慎操作。</li>
          <li>编辑地区信息后，需手动更新地区缓存(平台 > 设置 > 清理缓存 > 地区)，前台才会生效。</li>
          <li>所属大区为默认的全国性的几大区域，只有省级地区才需要填写大区域，目前全国几大区域有：华北、东北、华东、华南、华中、西南、西北、港澳台、海外</li>
          <li>所在层级为该地区的所在的层级深度，如北京>北京市>朝阳区,其中北京层级为1，北京市层级为2，朝阳区层级为3</li>
        </ul>
      </div>
      <span title="收起提示" id="explanationZoom" style="display: block;"></span>
    </div>
    <div class="mDiv">
      <div class="ftitle">
        <h3>地区列表</h3>
        <h5>(共 {{totalCount}} 条记录)</h5>
      </div>
      <div class="fbutton">
        <div class="add" @click="addAddress(parentAddress)">
          <span>
            <i class="el-icon-circle-plus" /> 新增地区
          </span>
        </div>
      </div>
      <a href @click.prevent="refresh()" class="refresh-date">
        <div title="刷新数据" class="pReload">
          <i class="fa fa-refresh"></i>
        </div>
      </a>

      <div
        title="上级区域"
        v-if="parentNameArr.length"
        style="width:auto;float:left;margin-left:20px"
      >上级区域 ：{{parentNameArr.join(' ➣ ')}}</div>
      <div class="fbutton" v-if="parentNameArr.length">
        <div class="add" @click="toParent()">
          <span>
            <i class="el-icon-top" /> 返回上级地区
          </span>
        </div>
      </div>
      <div class="searchbox">
        <el-input
          class="searchinput"
          v-model="addressName"
          size="small"
          placeholder="搜索地区"
          clearable
        ></el-input>
        <el-button class="searchbtn" size="small" icon="el-icon-search" @click="getPage(-1)">搜索</el-button>
      </div>
    </div>
    <div class="tablebox" v-if="tableData">
      <el-table :data="tableData" ref="multipleTable" style="width: 100%;">
        <el-table-column label="地区" prop="name" width="120"></el-table-column>
        <el-table-column label="所在层级" prop="level" width="120"></el-table-column>
        <el-table-column label="上级地区ID" prop="parent_id" width="120"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button-group>
              <el-button
                icon="el-icon-zoom-in"
                v-if="scope.row.level < 4"
                @click="toChildren(scope.row)"
                size="small"
              >查看下级</el-button>
              <el-button
                v-if="scope.row.level < 4"
                icon="el-icon-plus"
                @click="addAddress(scope.row)"
                size="small"
              >新增下级</el-button>
              <el-button @click="remove(scope.row)" icon="el-icon-delete" size="small">删除</el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      title="地区设置 - 新增"
      :visible.sync="centerDialogVisible"
      width="30%"
      center
      :modal-append-to-body="false"
    >
      <el-form ref="form" label-width="100px">
        <el-form-item label="上级区域：" v-if="region.parentName">
          <p class="notic">{{region.parentName}}</p>
        </el-form-item>
        <el-form-item label="地区名：" required>
          <el-input v-model="region.name"></el-input>
          <p class="err-msg" v-if="errResult.name && !region.name">{{errResult.name}}</p>
          <p class="notic">请认真填写地区名称，地区设定后将直接影响订单、收货地址等重要信息，请谨慎操作。</p>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addAddressSubmit" :loading="isLoading">添加</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getRegionList,
  getRegionParentFullName,
  addRegion,
  deleteRegionById
} from "@/utils/api";
export default {
  data() {
    return {
      tableData: [],
      totalCount: 0,
      parentAddress: {
        id: 0
      },
      centerDialogVisible: false,
      region: {
        parentName: null,
        name: null
      },
      isLoading: false,
      errResult: {},
      addressName: null,
      parentNameArr: [] //上级区域名称数组
    };
  },
  created() {
    this.getPage(0);
  },
  methods: {
    handleSizeChange(e) {
      this.pageSize = e;
      this.getPage();
    },
    handleCurrentChange(e) {
      this.currentPage = e;
      this.getPage();
    },
    getPage(parentId) {
      var that = this;
      var params = {};
      if (parentId == -1) {
        this.parentNameArr = []; //搜索时清空上级区域名称数组
        if (this.addressName != null && this.addressName != "") {
          params.name = this.addressName;
        } else {
          params.parent_id = 0;
        }
      } else {
        //非搜索进入，清除搜索关键词
        this.addressName = null;
        params.parent_id = parentId;
      }
      getRegionList(params).then(function(res) {
        that.tableData = res;
        that.totalCount = res.length;
      });
    },
    refresh() {
      this.getPage(this.parentAddress.id);
      this.$message.success("刷新成功！");
    },
    toParent() {
      var that = this;
      this.parentNameArr.pop();
      this.getPage(this.parentAddress.parent_id);
      //获取上级对象
      if (this.parentAddress.parent_id > 0) {
        getRegionList({ ids: this.parentAddress.parent_id }).then(function(
          res
        ) {
          that.parentAddress = res[0];
        });
      } else {
        this.parentAddress.id = 0;
      }
    },
    toChildren(row) {
      this.parentAddress = row;
      this.getParentNameFull();
      this.getPage(this.parentAddress.id);
    },
    getParentNameFull() {
      var that = this;
      getRegionParentFullName({ parent_id: this.parentAddress.id }).then(
        function(res) {
          that.parentNameArr = res;
        }
      );
    },
    addAddress(row) {
      if (row.id) {
        this.region = {
          parent_id: row.id,
          level: row.level + 1,
          parentName: row.name,
          name: null
        };
      } else {
        this.region = {
          parent_id: 0,
          level: 1,
          parentName: null,
          name: null
        };
      }
      this.centerDialogVisible = true;
    },
    addAddressSubmit() {
      this.isLoading = true;
      var that = this;
      addRegion(this.region).then(function(res) {
        if (res.status == 1) {
          that.$message.success("添加成功");
          that.centerDialogVisible = false;
          that.getPage(that.parentAddress.id);
        } else if (res.status == -1) {
          that.$message.error("参数错误");
          that.errResult = res.result;
        } else {
          that.$message.error(res.msg);
        }
        that.isLoading = false;
      });
    },
    remove(row) {
      var that = this;
      this.$confirm("确认删除 " + row.name + "与其所有下级地区?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          deleteRegionById(row.id).then(function(res) {
            if (res.status == 1) {
              that.getPage(that.parentAddress.id);
              that.$message.success("删除成功!");
            }
          });
        })
        .catch(() => {
          that.$message.info("已取消删除");
        });
    }
  }
};
</script>

<style scoped>
.searchinput {
  width: auto;
}
</style>
